<template>
  <view class="date-picker-overlay" v-if="visible" @click="handleCancel">
    <view class="date-picker-container" @click.stop>
      <!-- 头部 -->
      <view class="date-picker-header">
        <text class="cancel-btn" @click="handleCancel">取消</text>
        <text class="confirm-btn" @click="handleConfirm">确定</text>
      </view>
      
      <!-- 日期选择区域 -->
      <view class="date-picker-content">
        <picker-view 
          :value="pickerValue" 
          @change="onPickerChange"
          class="picker-view"
          indicator-style="height: 80rpx;"
        >
          <!-- 年份选择 -->
          <picker-view-column>
            <view class="picker-item" v-for="year in years" :key="year">
              <text class="picker-text">{{ year }}年</text>
            </view>
          </picker-view-column>
          
          <!-- 月份选择 -->
          <picker-view-column>
            <view class="picker-item" v-for="month in months" :key="month">
              <text class="picker-text">{{ month }}月</text>
            </view>
          </picker-view-column>
          
          <!-- 日期选择 -->
          <picker-view-column>
            <view class="picker-item" v-for="day in days" :key="day">
              <text class="picker-text">{{ day }}日</text>
            </view>
          </picker-view-column>
        </picker-view>
      </view>
      
      <!-- 选择指示器 -->
      <view class="picker-indicator">
        <view class="indicator-line"></view>
        <view class="indicator-line"></view>
      </view>
      
      <!-- 渐变遮罩 -->
      <view class="picker-mask picker-mask-top"></view>
      <view class="picker-mask picker-mask-bottom"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'DatePicker',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    },
    minYear: {
      type: Number,
      default: 1900
    },
    maxYear: {
      type: Number,
      default: 2100
    }
  },
  data() {
    return {
      selectedYear: 2018,
      selectedMonth: 8,
      selectedDay: 18,
      years: [],
      months: [],
      days: [],
      pickerValue: [0, 0, 0]
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.initData();
      }
    },
    value: {
      handler(newVal) {
        if (newVal) {
          this.parseDate(newVal);
        }
      },
      immediate: true
    },
    selectedYear() {
      this.generateDays();
      this.updatePickerValue();
    },
    selectedMonth() {
      this.generateDays();
      this.updatePickerValue();
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      // 生成年份数组
      this.years = [];
      for (let i = this.minYear; i <= this.maxYear; i++) {
        this.years.push(i);
      }
      
      // 生成月份数组
      this.months = [];
      for (let i = 1; i <= 12; i++) {
        this.months.push(i);
      }
      
      // 生成日期数组
      this.generateDays();
      this.updatePickerValue();
    },
    
    generateDays() {
      this.days = [];
      const daysInMonth = this.getDaysInMonth(this.selectedYear, this.selectedMonth);
      for (let i = 1; i <= daysInMonth; i++) {
        this.days.push(i);
      }
      
      // 如果当前选择的日期超出新的月份天数，调整为最后一天
      if (this.selectedDay > daysInMonth) {
        this.selectedDay = daysInMonth;
      }
    },
    
    getDaysInMonth(year, month) {
      return new Date(year, month, 0).getDate();
    },
    
    parseDate(dateString) {
      if (!dateString) return;
      
      const date = new Date(dateString);
      if (!isNaN(date.getTime())) {
        this.selectedYear = date.getFullYear();
        this.selectedMonth = date.getMonth() + 1;
        this.selectedDay = date.getDate();
        this.generateDays();
        this.updatePickerValue();
      }
    },
    
    updatePickerValue() {
      const yearIndex = this.years.indexOf(this.selectedYear);
      const monthIndex = this.months.indexOf(this.selectedMonth);
      const dayIndex = this.days.indexOf(this.selectedDay);
      
      this.pickerValue = [
        yearIndex >= 0 ? yearIndex : 0,
        monthIndex >= 0 ? monthIndex : 0,
        dayIndex >= 0 ? dayIndex : 0
      ];
    },
    
    onPickerChange(e) {
      const values = e.detail.value;
      this.selectedYear = this.years[values[0]];
      this.selectedMonth = this.months[values[1]];
      this.selectedDay = this.days[values[2]];
    },
    
    handleCancel() {
      this.$emit('cancel');
    },
    
    handleConfirm() {
      const selectedDate = `${this.selectedYear}-${String(this.selectedMonth).padStart(2, '0')}-${String(this.selectedDay).padStart(2, '0')}`;
      this.$emit('confirm', selectedDate);
    }
  }
}
</script>

<style lang="scss" scoped>
.date-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.date-picker-container {
  background-color: #fff;
  border-radius: 20rpx;
  width: 600rpx;
  max-height: 800rpx;
  overflow: hidden;
  position: relative;
}

.date-picker-header {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  background-color: #f8f8f8;
  border-bottom: 1rpx solid #f0f0f0;
  
  .cancel-btn {
    font-size: 32rpx;
    color: #999;
  }
  
  .confirm-btn {
    font-size: 32rpx;
    color: #007aff;
  }
}

.date-picker-content {
  height: 400rpx;
  position: relative;
}

.picker-view {
  height: 100%;
  width: 100%;
}

.picker-item {
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .picker-text {
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
  }
}

// 渐变遮罩效果
.picker-mask {
  position: absolute;
  left: 0;
  right: 0;
  height: 80rpx;
  pointer-events: none;
  z-index: 2;
}

.picker-mask-top {
  top: 88rpx;
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 0.8) 20%, 
    rgba(255, 255, 255, 0.4) 50%, 
    rgba(255, 255, 255, 0) 100%);
}

.picker-mask-bottom {
  bottom: 0;
  background: linear-gradient(to top, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 0.8) 20%, 
    rgba(255, 255, 255, 0.4) 50%, 
    rgba(255, 255, 255, 0) 100%);
}

.picker-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 3;
  
  .indicator-line {
    height: 1rpx;
    background-color: #f0f0f0;
    margin: 40rpx 0;
  }
}
</style> 